<template>
    <div class="auditSub-index yuan-container">
        <a-card title="审核分包">
            <a-tabs type="card" :default-active-key="rawTypeKey" @change="tabChange">
                <a-tab-pane v-for="(item, i) in tabsData" :key="item.key" :tab="item.name"></a-tab-pane>
            </a-tabs>
            <div class="filter-panel">
                <a-input-search class="filter-list" allowClear v-model="keywords" placeholder="请输入关键词" @search="resetList" />
            </div>
            <div class="table">
                <a-table bordered :rowKey="item=>item.id" :data-source="pageList" :columns="columns" :pagination="pagination"
                    :loading="loading">
                </a-table>
            </div>
        </a-card>
        <FenbaoVue :visible="fenbaoVisible" @closeModal="() => fenbaoVisible = false" :infoId="fenbaoId" @resetList="getList" />
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :infoId="detailId" @resetList="getList"
            :isAudit="isAudit" />
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { h } from "vue";
import nextApi, { AuditSubListRes } from "@/api/nextApi";
import FenbaoVue from "./components/fenbao.vue";
import DetailVue from "./components/detail.vue";
@Component({
    name: "auditSubMgtIndex",
    components: { FenbaoVue, DetailVue },
})
export default class extends Vue {
    tabsData = [
        { key: "", name: "全部" },
        { key: "0", name: "待分包" },
        { key: "1", name: "待审核" },
        { key: "2", name: "已通过" },
        { key: "3", name: "已驳回" },
    ];
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    columns = [
        {
            align: "center",
            dataIndex: "productBigKind",
            key: "productBigKind",
            title: "产品大类",
        },
        {
            align: "center",
            dataIndex: "productType",
            key: "productType",
            title: "产品类型",
        },
        {
            align: "center",
            dataIndex: "varietyName",
            key: "varietyName",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "productBatch",
            key: "productBatch",
            title: "产品批号",
        },
        {
            align: "center",
            dataIndex: "discretion",
            key: "discretion",
            title: "装量",
        },
        {
            align: "center",
            dataIndex: "productionTime",
            key: "productionTime",
            title: "生产日期",
        },
        {
            align: "center",
            dataIndex: "expirationDate",
            key: "expirationDate",
            title: "保质期(月)",
        },
        {
            align: "center",
            dataIndex: "subpackageState",
            key: "subpackageState",
            title: "状态",
            customRender: (text: any, record: AuditSubListRes) => {
                const obj: { [key: number]: { title: string; class: string } } = {
                    0: { title: "待分包", class: "" },
                    1: { title: "待审核", class: "c-warning" },
                    2: { title: "已通过", class: "c-success" },
                    3: { title: "已驳回", class: "c-danger" },
                };
                const stautsObj = obj[record.subpackageState] || { title: "--", class: "" };
                return h("div", { class: stautsObj.class }, stautsObj.title);
            },
        },
        {
            align: "center",
            dataIndex: "subpackageNum",
            key: "subpackageNum",
            title: "分包数量",
        },
        {
            align: "center",
            dataIndex: "medicineClass",
            key: "medicineClass",
            title: "中药等级",
            customRender: (text: string, record: any, index: number) => `${record.medicineClass?record.medicineClass:'-'}`,
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 240,
            customRender: (text: string, record: AuditSubListRes, index: number) => {
                const detailH = h(
                    "a-button",
                    {
                        style: { marginRight: "5px" },
                        props: { icon: "eye", type: "primary", size: "small" },
                        on: { click: () => this.showDetail(record) },
                    },
                    "详情"
                );

                const fenbaoH = h(
                    "a-button",
                    {
                        style: { marginRight: "5px" },
                        props: { icon: "tool", type: "primary", size: "small" },
                        on: { click: () => this.showFenbao(record) },
                    },
                    record.subpackageState === 3 ? "重新分包" : "分包"
                );
                const auditH = h(
                    "a-button",
                    {
                        style: { marginRight: "5px" },
                        props: { icon: "info-circle", type: "warning", size: "small" },
                        on: { click: () => this.audit(record) },
                    },
                    "审核"
                );
                const btnArr:any = [];

                if (this.$utilCheckPermission(["checkSubpackageDetails"])) btnArr.push(detailH);
                if (record.subpackageState === 0 && this.$utilCheckPermission(["checkSubpackageSubpackage"])) btnArr.push(fenbaoH);
                if (record.subpackageState === 1 && this.$utilCheckPermission(["checkSubpackageCheck"])) btnArr.push(auditH);
                if (record.subpackageState === 3 && this.$utilCheckPermission(["checkSubpackageAnewSubpackage"])) btnArr.push(fenbaoH);

                return h("div", btnArr);
            },
        },
    ];
    loading = false;
    pageList: AuditSubListRes[] = [];
    keywords = "";
    rawTypeKey = "";
    async getList() {
        this.pageList = [];
        try {
            this.loading = true;
            const res = await nextApi.getAuditSubList({
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
                varietyName: this.keywords,
                subpackageState: this.rawTypeKey,
            });
            this.pagination.total = res.data?.total || 0;
            this.pageList = res.data?.rows || [];
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    tabChange(e: string) {
        console.info(e);
        this.rawTypeKey = e;
        this.resetList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    async mounted() {
        this.getList();
    }
    detailId = "";
    detailVisible = false;
    isAudit = false;
    showDetail(item: AuditSubListRes) {
        this.isAudit = false;
        this.detailId = item.id;
        this.detailVisible = true;
    }
    audit(item: AuditSubListRes) {
        this.isAudit = true;
        this.detailId = item.id;
        this.detailVisible = true;
    }
    fenbaoVisible = false;
    fenbaoId = "";
    showFenbao(item: AuditSubListRes) {
        this.fenbaoId = item.id;
        this.fenbaoVisible = true;
    }
}
</script>
<style lang="scss">
.auditSub-index {
    padding: 20px;
}
</style>
